<style type="text/less" lang="less" scoped>
@import url("./index.less");
</style>

<template>
  <el-container>
    <el-main class="content-main">
      <div class="ps-panel" style="height: 100%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-list"></i>
          <span class="ps-panel-head-title">列表</span>
          <span class="query">
            <el-button type="primary" size="mini" @click="add"
              >添加模型</el-button
            >
          </span>
        </div>

        <div class="ps-panel-body">
          <el-table
            :data="tableData"
            size="small"
            highlight-current-row
            stripe
            style="width: 100%; margin-bottom: 10px"
          >
            <el-table-column prop="id" label="ID" width="50"></el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="300"
            ></el-table-column>
            <el-table-column
              prop="regular"
              label="正则表达式"
            ></el-table-column>
            <el-table-column prop="is_enable" label="是否启用" width="100">
              <template slot-scope="scope">
                {{ scope.row["is_enable"] == 1 ? "启用" : "未启用" }}
              </template>
            </el-table-column>
            <el-table-column
              prop="addtime"
              label="添加时间"
              width="150"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row)"
                  >编辑</el-button
                >
                <el-popover
                  style="margin-left: 10px"
                  width="160"
                  trigger="manual"
                  :ref="'del_popover_' + scope.row.id"
                >
                  <p style="text-align: center; margin: 15px 0px">
                    确定删除吗？
                  </p>
                  <div style="text-align: center; margin: 0">
                    <el-button
                      size="mini"
                      @click="delPopoverClose('del_popover_' + scope.row.id)"
                      >取消</el-button
                    >
                    <el-button
                      type="primary"
                      size="mini"
                      @click="del(scope.row)"
                      >确定</el-button
                    >
                  </div>
                  <el-button
                    type="text"
                    slot="reference"
                    size="small"
                    @click="delPopoverShow('del_popover_' + scope.row.id)"
                    >删除
                  </el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              v-if="paginations.total > 0"
              :page-size="paginations.pageSize"
              :layout="paginations.layout"
              :total="paginations.total"
              :current-page="paginations.pageIndex"
              @current-change="jump"
              style="text-align: right"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-main>

    <el-dialog
      title="模型"
      :visible.sync="modelForm.visible"
      width="800px"
      class="edit"
    >
      <el-form
        ref="form"
        :model="modelForm"
        :rules="modelForm.rules"
        label-width="100px"
      >
        <el-form-item label="模型名称：" prop="name">
          <el-input
            v-model="modelForm.name"
            maxlength="20"
            placeholder="请输入模型名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="正则式：" prop="regular">
          <el-input
            v-model="modelForm.regular"
            maxlength="200"
            placeholder="请输入正则表达式"
          ></el-input>
        </el-form-item>
        <el-form-item label="JAVA：" prop="content">
          <el-input
            type="textarea"
            :rows="10"
            v-model="modelForm.content"
            maxlength="2000"
            placeholder="请输入JAVA"
          ></el-input>
        </el-form-item>
        <el-form-item label="测试数据：" prop="content">
          <el-input
            v-model="modelForm.testStr"
            maxlength="200"
            placeholder="请输入测试数据"
          ></el-input>
        </el-form-item>
        <el-form-item label="测试结果：" prop="content">
          <el-input
            type="textarea"
            :rows="3"
            v-model="modelForm.testRes"
            readonly
            placeholder="请输入JAVA"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modelForm.visible = false">取 消</el-button>
        <el-button @click="verify">验 证</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  name: "index",
  data: function () {
    return {
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 页显示多少条
        total: 0, // 总数
        layout: "total, prev, pager, next", // 翻页属性
      },
      tableData: [],
      modelForm: {
        visible: false,
        rules: {
          name: [{ required: true, message: "名称不能为空" }],
          regular: [{ required: true, message: "正则表达式不能为空" }],
        },
        id: 0,
        name: "",
        regular: "",
        content: "",
        is_enable: 0,
        testStr: "",
        testRes: "",
      },
    };
  },
  methods: {
    jump(i) {
      if (i === undefined) {
        i = this.paginations.pageIndex;
      } else {
        this.paginations.pageIndex = i;
      }
    this.$store.dispatch("ajaxSetting", {
    //   this.$store.dispatch("ajax", {
        url: "/api/regularModelList",
        method: "get",
        data: { page: i, number: this.paginations.pageSize },
        succeed: (res) => {
          this.tableData = res.rows;
          this.paginations.total = res.total;
        },
      });
    },
    add() {
      this.modelForm.visible = true;
      this.modelForm.id = 0;
      this.modelForm.name = "";
      this.modelForm.regular = "";
      this.modelForm.content = "";
    },
    edit(row) {
      this.modelForm.visible = true;
      this.modelForm.id = row.id;
      this.modelForm.name = row.name;
      this.modelForm.regular = row.regular;
      this.modelForm.content = row.content;
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.modelForm.id === 0) {
              this.$store.dispatch("ajaxSetting", {
            // this.$store.dispatch("ajax", {
              url: "/api/regularModelAdd",
              method: "post",
              data: this.modelForm,
              succeed: () => {
                this.jump();
                this.$message.success("保存成功");
                this.modelForm.visible = false;
              },
            });
          } else {
              this.$store.dispatch("ajaxSetting", {
            // this.$store.dispatch("ajax", {
              url: "/api/regularModelEdit",
              method: "put",
              data: this.modelForm,
              succeed: () => {
                this.jump();
                this.$message.success("保存成功");
                this.modelForm.visible = false;
              },
            });
          }
        }
      });
    },
    del(row) {
      this.delPopoverClose("del_popover_" + row.id);
      this.$store.dispatch("ajaxSetting", {
    //   this.$store.dispatch("ajax", {
        url: "/api/regularModelDel",
        method: "put",
        data: [row.id],
        succeed: () => {
          this.jump();
          this.$message.success("删除成功");
          this.delPopoverClose("del_popover_" + row.id);
        },
      });
    },
    verify() {
        this.$store.dispatch("ajaxSetting", {
    //   this.$store.dispatch("ajax", {
        url: "/api/regularModelVerify",
        method: "post",
        data: this.modelForm,
        succeed: (res) => {
          // this.$message.success('验证成功');
          this.modelForm.testRes = JSON.stringify(res.testRes);
        },
      });
    },
    delPopoverShow(ref) {
      this.$refs[ref].doShow();
    },
    delPopoverClose(ref) {
      this.$refs[ref].doClose();
    },
  },
  mounted: function () {
    this.jump(1);
  },
};
</script>